<template>
  <div style="padding: 10px; display: flex; flex-direction: column; height: 100%;">
    <el-form :model="form" label-width="130px" :inline="true" style="height: calc(100% - 50px); display: flex; flex-direction: column;">
        <div class="detail-title">基本信息</div>
        <div style="display: flex;  flex-wrap: wrap;">
          <el-form-item label="设备名称" prop="remark">
            <p>{{form.equipmentName || '- -'}}</p>
          </el-form-item>
          <el-form-item label="设备型号" prop="remark">
            <p>{{form.version || '- -'}}</p>
          </el-form-item>
          <el-form-item label="设备类型" prop="equipmentTypeName">
            <p>{{form.equipmentTypeName || '- -'}}</p>
          </el-form-item>
          <el-form-item label="设备编码" prop="equipmentCode">
            <el-tooltip :content="form.equipmentCode" placement="top">
              <p>{{form.equipmentCode || '- -'}}</p>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="设备识别码" prop="nodeId">
            <p>{{form.nodeId || '- -'}}</p>
          </el-form-item>
          <el-form-item label="安装位置" prop="position">
            <p>{{ getParkPositionStr(form.parkBuildingName, form.parkBuildingAreaName, form.parkBuildingFloorName, form.parkBuildingRoomName) }}</p>
          </el-form-item>
          <el-form-item label="运行状态" prop="statusName">
            <p>{{form.statusName || '- -'}}</p>
          </el-form-item>
          <el-form-item label="录入时间" prop="createTime">
            <p>{{form.createTime || '- -'}}</p>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <p>{{form.remark || '- -'}}</p>
          </el-form-item>
        </div>
        <div class="detail-title" style="margin-top: 20px;">警报记录</div>
        <el-table  v-loading="loading" :data="form.alarmRecordVoList" prop="equipmentId" style="flex: 1;">
          <el-table-column label="报警编号" align="center" prop="" show-overflow-tooltip />
          <el-table-column label="报警类型" align="center" prop="alarmType" show-overflow-tooltip>
            <template #default="scope">
              <dict-tag :options="alarm_type" :value="scope.row.alarmType"/>
            </template>
          </el-table-column>
          <el-table-column label="程度" align="center" prop="alarmGrade" show-overflow-tooltip>
            <template #default="scope">
              <dict-tag :options="alarm_grade" :value="scope.row.alarmGrade"/>
            </template>
          </el-table-column>
          <el-table-column label="描述" align="center" prop="alarmDesc" show-overflow-tooltip />
          <el-table-column label="报警位置" align="center" prop="alarmAaddress" show-overflow-tooltip />
          <el-table-column label="上报时间" align="center" prop="alarmTime" show-overflow-tooltip />
          <el-table-column label="操作" align="center"  fixed="right" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-tooltip content="查看照片" placement="top">
                <el-button v-hasPermi="['equipment:equipment-info:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="EquipmentInfoList" />
    </el-form>
    <div style="height: 50px; display: flex; justify-content: center; align-items: center;">
      <el-button @click="emit('close')">关 闭</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { EquipmentInfoVO, EquipmentInfoQuery, EquipmentInfoForm } from '@/api/facility/equipment-info/types';
import { getEquipmentInfo } from '@/api/facility/equipment-info';
import { listEquipmentInfo } from '@/api/facility/equipment-info';
import { listcontrolpoint } from '@/api/security/firefighting/fire-equipment-group';
import { getParkPositionStr } from '@/utils/parkUtil';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const equipmentInfoList = ref<EquipmentInfoVO[]>([]);
const total = ref(0);
const loading = ref(false);

const data = reactive<PageData<EquipmentInfoForm, EquipmentInfoQuery>>({
  form: { },
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  rules: { }
});
const { queryParams, form, rules } = toRefs(data);

const props = defineProps({
  fireControlEquipmentId: String | Number
});

const emit = defineEmits(['close', 'success']);

const equipmenInfo = async () => {
  proxy.$modal.loading('加载中');
  const res = await getEquipmentInfo(props.fireControlEquipmentId).finally(() => proxy.$modal.closeLoading());
  Object.assign(form.value, res.data);
}

/** 查询设备信息列表 */
const EquipmentInfoList = async () => {
  loading.value = true;
  const res = await listEquipmentInfo(queryParams.value).finally(() => loading.value = false);
  equipmentInfoList.value = res.rows;
  total.value = res.total;
  loading.value = false;
}

onMounted(()=>{
  equipmenInfo();
})

</script>
<style lang="scss" scoped>

p {
  width: 280px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.detail-title {
  margin-bottom: 10px;
  margin-left: 15px;
  border-left: 6px solid #409eff;
  padding-left: 10px;
}
</style>

